<template>
  <a-card style="width:80%; height:670px; margin:0 170px 0 170px" >
    <a-card style="width:140px; height:140px; float:left; margin:100px 0 0 50px" :bordered="false">
      <a-space direction="vertical" :style="{ width: '100%' }">
        <a-upload
          :action="url + 'common/upload'"
          :fileList="file ? [file] : []"
          :show-file-list="false"
          :headers="{
            token
          }"
          @change="onChange"
          @progress="onProgress"
        >
          <template #upload-button>
            <div
              :class="`arco-upload-list-item${
                file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
              }`"
            >
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="file && file.url"
              >
                <img :src="file.url" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
                <a-progress
                  v-if="file.status === 'uploading' && file.percent < 100"
                  :percent="file.percent"
                  type="circle"
                  size="mini"
                  :style="{
                    position: 'absolute',
                    left: '50%',
                    top: '50%',
                    transform: 'translateX(-50%) translateY(-50%)',
                  }"
                />
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                  <div style="margin-top: 10px; font-weight: 600">Upload</div>
                </div>
              </div>
            </div>
          </template>
        </a-upload>
      </a-space>
    </a-card>
    <a-card style="width:80%; height:100%; float:right; margin-right:50px;" :bordered="false">
      <a-radio-group type="button" v-model="size">
        <a-radio value="mini">mini</a-radio>
        <a-radio value="small">small</a-radio>
        <a-radio value="medium">medium</a-radio>
        <a-radio value="large">large</a-radio>
      </a-radio-group>
      <div style="margin-top: 20px">
        <a-descriptions :data="data" :size="size" title="个人信息" bordered/>
      </div>
    </a-card>
  </a-card>
</template>

<script setup lang="ts">
  import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon';
  import axios from 'axios';
  import { number } from 'echarts/core';
  import { ref } from 'vue';

  const url = ref('')

  url.value = import.meta.env.VITE_API_Admin_URL

  const file = ref();
  const token = localStorage.getItem('token')
  const sculpture = localStorage.getItem('sculpture')

  file.value = `${url.value}/common/fileId/${sculpture}`

  const onChange = (_, currentFile) => {
    file.value = {
      ...currentFile,
      // url: URL.createObjectURL(currentFile.file),
    };
  };

  const onProgress = (currentFile) => {
    console.log(currentFile);
    
    file.value = currentFile;
  };
    
  const size = ref('medium');
  const data = ref([
    { label: '姓名', value: '' },
    { label: '邮箱', value: '' },
    { label: 'WCAID', value: '' },
    { label: '性别', value: '' },
    { label: '认证', value: '' },
    { label: '生日', value: '' },
    { label: '手机号', value: '' },
    { label: '身份类型', value: '' },
    { label: '身份证号', value: '' },
    { label: '学校', value: '' }
  ]);
  const userInfoFunc = async() => {
    await axios.get(`/user/list`).then((res) => {
      console.log(res)
      data.value[0].value = res.nickName
      data.value[1].value = res.email
      data.value[2].value = res.wcaId
      data.value[3].value = res.gender
      data.value[4].value = res.roleType
      data.value[5].value = res.birth
      data.value[6].value = res.phone
      data.value[7].value = res.certificateType
      data.value[8].value = res.certificatePhone
      data.value[9].value = res.schoolName
    })
  }
  
  userInfoFunc()

</script>
